<template>
  <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-form-item label="赛事名称" prop="matchName">
        <el-input v-model="dataForm.matchName" placeholder="赛事名称"></el-input>
      </el-form-item>
      <el-form-item label="赛事等级" prop="matchLevel">
        <ren-select v-model="dataForm.matchLevel" dict-type="matchLevel" placeholder="赛事等级"></ren-select>
      </el-form-item>
      <el-form-item label="母赛事" prop="matchParentId">
        <el-select v-model="dataForm.matchParentId" placeholder="母赛事" :rules="[{ required: true, message: '请选择母赛事', trigger: 'blur' }]">
          <el-option value="">请选择</el-option>
          <el-option v-for="item in matchList" :key="item.id" :label="item.matchName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="province">
        <el-select style="width:285px" placeholder="请选择" v-model="dataForm.province"  @change="selectCity">
          <el-option
            v-for="itemO in area.item"
            :key="itemO.code"
            :label="itemO.name"
            :value="itemO.code">
          </el-option>
        </el-select>
         ~
        <el-select style="width:285px" placeholder="请选择" v-model="dataForm.city" >
          <el-option
            v-for="itemO in areaCity.item"
            :key="itemO.code"
            :label="itemO.name"
            :value="itemO.code">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="是否跨地区" prop="isOpen">
        <ren-radio-group v-model="dataForm.isOpen" dict-type="isOpen"></ren-radio-group>
      </el-form-item>
      <el-form-item label="赛季年度" prop="season">
        <ren-select v-model="dataForm.season" dict-type="season" placeholder="赛季年度"></ren-select>
      </el-form-item>
      <el-form-item label="比赛时间" prop="beginDate">
        <el-date-picker type="date" placeholder="比赛时间起" value-format="YYYY-MM-DD" v-model="dataForm.beginDate"></el-date-picker>
         ~
        <el-date-picker type="date" placeholder="比赛时间止" value-format="YYYY-MM-DD" v-model="dataForm.endDate"></el-date-picker>
      </el-form-item>
      <el-form-item label="报名时间" prop="beginSignup">
        <el-date-picker type="date" placeholder="报名时间起" value-format="YYYY-MM-DD" v-model="dataForm.beginSignup"></el-date-picker>
         ~
        <el-date-picker type="date" placeholder="报名时间止" value-format="YYYY-MM-DD" v-model="dataForm.endSignup"></el-date-picker>
      </el-form-item>
      <el-form-item label="管理员" prop="adminId">
        <el-select v-model="dataForm.adminId" placeholder="请选择">
          <el-option v-for="item in sysUserList" :key="item.id" :label="item.username" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="赛事状态" prop="status">
        <ren-radio-group v-model="dataForm.status" dict-type="matchStatus"></ren-radio-group>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import baseService from "@/service/baseService";
import { useDebounce } from "@/utils/utils";
export default defineComponent({
  setup() {
    return reactive({
      visible: false,
      dataForm: {
        id: "",
        matchName: "",
        matchLevel: "",
        matchParentId: "",
        province: "",
        city: "",
        isOpen: "",
        season: "",
        beginDate: "",
        endDate: "",
        beginSignup: "",
        endSignup: "",
        adminId: "",
        status: ""
      },
      area:{code:'0',item:[{code:'0',name:'请选择'}]},
      areaCity:{code:'0',item:[{code:'0',name:'请选择'}]},
      matchList: [{
        id: "",
        matchName: ""
      }],
      sysUserList: [{id: "",username: ""}]
    });
  },
  computed: {
    dataRule() {
      return {
        matchName: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        matchLevel: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        //matchParentId: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        province: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        city: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        isOpen: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        season: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        beginDate: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        endDate: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        beginSignup: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        endSignup: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        adminId: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        status: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
      };
    }
  },
  created() {
    this.dataFormSubmitHandle = useDebounce(this.dataFormSubmitHandle);
    this.areaList(this.area);
    this.selectMatch();
    this.getSysUserList();
  },
  methods: {
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataFormRef"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      baseService.get("/sp/spmatch/" + this.dataForm.id).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.dataForm = res.data;
        this.selectCity();
      });
    },
    // 查询管理员列表
    getSysUserList() {
      baseService.get("/sys/user/list", {}).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.sysUserList = res.data;
      });
    },
    // 表单提交
    dataFormSubmitHandle() {
      this.$refs["dataFormRef"].validate((valid: boolean) => {
        if (!valid) {
          return false;
        }
        (!this.dataForm.id ? baseService.post : baseService.put)("/sp/spmatch", this.dataForm).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            }
          });
        });
      });
    },
    // 获取省份
    areaList(target: any) {
      baseService.get("/front/fast/sys/areaDict/list?pid=" + target.code).then((e: any) => {
        target.item = e.data;
      });
    },
    // 选择城市
    selectCity(){
      if(this.dataForm.province){
        this.areaCity.code=this.dataForm.province;
        this.areaList(this.areaCity);
      }else{
        this.areaCity.item=[];
      }
    },
    // 查询所有赛事
    selectMatch(){
      baseService.get("/sp/spmatch/list").then((res) => {
        if (res.code == 0) {
          this.matchList = res.data;
        }
      });
    }
  }
});
</script>
